<template>
	<view class="address-manage-page">
		<view class="search-bnak-detail">
			<view class="">
				<view class="search-bnak-input">
					<image :src="imglink + 'member/search-icon.png'" mode="" @click="searchShop"></image>
					<input type="text" v-model="shopName" placeholder="输入门店名称"/>
				</view>
				<view class="search-bnak-title" @click="searchShop">
					搜索
				</view>
			</view>
		</view>
		<view class="" style="margin-top: 100upx;height: 100%;">
			<scroll-view v-if="orderList.length != 0" scroll-y="true" scroll-with-animation  :style="'height:'+height+'px'" @scrolltolower="LoadingMore">
				<view class="address-details" v-for="(item,index) in orderList" :key='index'>
					<view class="shop-name">
						<view class="shop-name-title">{{item.name}}</view>
						<view class="shop-name-edit" @click="opdataAddre(item)">
							<image :src="imglink + 'member/edit.png'" mode=""></image>
							<text>编辑</text>
						</view>
					</view>
					<view class="address-details-content">
						<view class="address-msg">
							<view class="user-msg">
								<text>{{item.contact}}</text>
								<text>{{item.phone}}</text>
							</view>
							<view class="address-content">
								{{item.addreDetail | address_val}}
							</view>
						</view>
						<view class="is-pick"  v-if="options.page == 'activity'">
							<checkbox-group>
								<label :key="item.id" @click="checkbox(item)">
									<view>
										<checkbox style="transform:scale(0.8);" color="#FF8B46" :value="'ck'+item.customer_organization_salesroom_id"
										 :checked="item.checked" />
									</view>
								</label>
							</checkbox-group>
						</view>
						<view class="del-icon" v-else>
							<image @click="delAddre(item.customer_organization_salesroom_id)" :src="imglink + 'member/manage-store_icon_delete.png'" mode="" ></image>
						</view>
					</view>
				</view>
				<view class="" style="padding-bottom: 140upx;box-sizing: border-box;" v-if="options.page == 'activity'">
					<view class="check-all">
						<checkbox-group style="display: flex;" @change="ckAll">
							<checkbox id="ckAll" :checked="checkedAll" style="transform:scale(0.8);margin-left: 618upx;" color="#FF8B46" />
							<view class="check-all-title" @click="ckAll">
								全选
							</view>
						</checkbox-group>
					</view>
					<view class="sure-add">
						<view class="sure-choose" @click="sureShop">确认</view>
						<view class="add-shop" @click="addAdrre">添加新门店</view>
					</view>
				</view>
				<view class="" style="padding-bottom: 140upx;box-sizing: border-box;" v-else>
					<view class="add-shop-manage" @click="addAdrre">添加新门店</view>
				</view>
			</scroll-view>
			<view style="width: 100%;" v-else>
				<view class="no-shop" >
					暂无门店信息，请添加
				</view>
				<view class="" style="position: absolute;top: 40%;left: 50%;transform: translate(-50%,0);">
					<view class="add-shop-manage" @click="addAdrre">添加新门店</view>
				</view>
			</view>
		</view>
		<!-- 删除门店确认 -->
		<uni-popup ref="delShop" :custom="true">
			<view class="popup_box_de">
				<view class="popup_box-tip">
					删除门店确认
				</view>
				<view class="popup_box-reminder">
					是否删除该门店，删除后无法恢复
				</view>
				<view class="popup_box-click">
					<view class="" @click="delSucced">确认删除</view>
					<view class="" @click="cancelDel">取消</view>
				</view>
			</view>
		</uni-popup>
		<!-- 删除成功 -->
		<view class="save-popup" v-if="saveState">
			<view class="save-popup-img">
				<image :src="imglink + 'home/pop_icon_success.png'" mode=""></image>
			</view>
			<view class="save-popup-title">
				修改成功
			</view>
		</view>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default{
		filters: {
			address_val(value) {
				if (!value) return ''
				if (value.length > 22) {
					return value.slice(0, 22) + '...'
				}
				return value
			}
		},
		components:{uniPopup},
		data(){
			return {
				options:'',
				saveState:false,
				page:1,
				pageSize:8,
				lastPage:'',
				orderList:[],
				shopId:'',
				shopName:'',
				height:0,
				result2: [],
				checkedAll: false,
				shopNameArray:[],
				addrList:[],
				store_id:''
			}
		},
		onLoad(option) {
			console.log(option)
			let store_id = parseInt(option.store_id,10);
			console.log('进入了onload 获取url的store_id',store_id)
			if(!store_id > 0){
				store_id = uni.getStorageSync('store_id')?parseInt(uni.getStorageSync('store_id'),10):0
			}else{
				uni.setStorageSync('store_id', store_id)
			}
			this.store_id = parseInt(store_id,10)
			this.$store.commit('updateStoreId',store_id)
			this.height = parseInt(uni.getSystemInfoSync().windowHeight) - this.height
			this.options = option
			
		},
		onShow() {
			this.gainOrgan()
			
			console.log(this.result2)
		},
		methods:{
			gainOrgan(){
				let data ={
					token:this.$store.getters.getToken,
					store_id:this.store_id
				}
				this.$api.gain_organ_msg(data).then(res => {
					console.log(res)
					if(res.status){
						this.$store.commit('updataOrganId',res.list[0].customer_organization_id);
						uni.setStorageSync("OrganId",res.list[0].customer_organization_id)
						this.getList()
					}
				}).catch(err => {
					console.log(err)
				})
			},
			// 确定参与活动门店
			sureShop(){
				this.$store.state.joinActShopID = this.result2
				this.$store.state.joinActShopName = this.shopNameArray
				this.$store.state.joinActShopAddre = this.addrList
				uni.removeStorageSync('addAddreName')
				uni.removeStorageSync('addAddreId')
				uni.navigateBack({
					delta:1
				})
			},
			// 单选
			checkbox(data) {
				console.log(this.result2.indexOf(data.customer_organization_salesroom_id) == -1)
				if (this.result2.indexOf(data.customer_organization_salesroom_id) == -1) {
					this.orderList.forEach(item => {
						if (data.customer_organization_salesroom_id == item.customer_organization_salesroom_id) {
							this.$set(item, 'checked', true)
						}
					});
					this.result2.push(data.customer_organization_salesroom_id);
					this.shopNameArray.push(data.name)
					this.addrList.push(data)
					if (this.result2.length >= this.orderList.length) {
						this.checkedAll = true;
					}
				} else {
					let index = 0
					this.orderList.forEach(item => {
						if (data.customer_organization_salesroom_id == item.customer_organization_salesroom_id) {
							this.$set(item, 'checked', false)
						}
						
						for(let i=0;i<this.addrList.length;i++){
							if(this.addrList[i].customer_organization_salesroom_id == data.customer_organization_salesroom_id){
								index = i
							}
						}
						
					});
					
					this.addrList.splice(index,1)
					this.$delete(this.result2, this.result2.indexOf(data.customer_organization_salesroom_id))
					this.$delete(this.shopNameArray, this.shopNameArray.indexOf(data.name))
					// this.$delete(this.addrList,this.result2.indexOf(data.customer_organization_salesroom_id))
					if (this.result2.length < this.orderList.length) {
						this.checkedAll = false;
					}
				}
				console.log('this.result2', this.result2)
				console.log('this.shopNameArray', this.shopNameArray)
				console.log('this.addrList', this.addrList)
			},
			// 全选
			ckAll(e) {
				if (this.result2.length >= this.orderList.length) {
					this.orderList.forEach(item => {
						this.$set(item, 'checked', false)
						this.result2 = [];
						this.shopNameArray = []
						this.addrList = []
					});
					this.checkedAll = false;
				} else {
					this.orderList.forEach(item => {
						this.$set(item, 'checked', true);
						if (this.result2.indexOf(item.customer_organization_salesroom_id) == -1) {
							this.result2.push(item.customer_organization_salesroom_id)
							this.shopNameArray.push(item.name)
							this.addrList.push(item)
						}
					});
					this.checkedAll = true;
				}
				console.log('this.result2', this.result2)
				console.log('this.shopNameArray', this.shopNameArray)
				console.log('this.addrList', this.addrList)
			},
			// 根据门店名称搜索
			searchShop(){
				this.getList()
			},
			// 取消删除门店
			cancelDel(){
				this.$refs.delShop.close()
			},
			addAdrre(){
				uni.navigateTo({
					url:'./addAddress/addAddress?page=add&store_id=' + this.store_id
				})
			},
			opdataAddre(item){
				uni.setStorageSync('editAddr',item)
				uni.navigateTo({
					url:'./addAddress/addAddress?page=updata&store_id=' + this.store_id
				})
			},
			// 打开删除弹框
			delAddre(id){
				this.shopId = id
				this.$refs.delShop.open()
			},
			delSucced(){
				// this.$refs.delShop.close()
				// this.saveState = true
				// setTimeout(()=> {
				// 	this.saveState = false
				// },1000)
				let data = {
					token:this.$store.getters.getToken,
					customer_organization_salesroom_id:this.shopId
				}
				this.$api.del_shop_msg(data).then(res => {
					console.log(res)
					if(res.status){
						this.$refs.delShop.close()
						this.saveState = true
						setTimeout(()=> {
							this.saveState = false
							this.getList()
						},1000)
					}else{
						uni.showToast({
							title:res.msg,
							icon:"none",
							duration:2000
						})
						setTimeout(() => {
							this.$refs.delShop.close()
						},1000)
					}
				}).catch(err => {
					console.log(err)
				})
			},
			// 获取列表
			getList(){
				let data = {
					token:this.$store.getters.getToken,
					page:1,
					pagesize:this.pageSize,
					name:this.shopName,
					organization_id:this.$store.getters.getOrganId
				}
				this.$api.get_address_list(data).then( res => {
					if(res.status){
						this.orderList = res.list.data
						this.lastPage = res.list.last_page
						this.orderList.forEach(item => {
							item.addreDetail = item.province_id.province+ '省'+item.city_id.city+item.country_id.country+item.address
						})
						var reg = /^(\d{3})\d{4}(\d{4})$/
						for(let i = 0;i < this.orderList.length; i++){
							this.orderList[i].phone = this.orderList[i].telephone.replace(reg, "$1****$2")
						}
						if(this.options.actAddre == "actEdit"){
							this.result2 = uni.getStorageSync('editActAddreId')
							this.shopNameArray = uni.getStorageSync('editActAddreName')
							if(this.result2.length == this.orderList.length){
								this.checkedAll = true
								this.orderList.forEach(item => {
									this.$set(item,'checked',true)
								})
							}else{
								this.orderList.forEach(item => {
									this.result2.forEach(info => {
										if(info == item.customer_organization_salesroom_id){
											this.$set(item,'checked',true)
										}
									})
								})
							}
						}else if(this.options.actAddre == "actAdd"){
							if(uni.getStorageSync('addAddreId')){
								this.result2 = uni.getStorageSync('addAddreId')
								this.shopNameArray = uni.getStorageSync('addAddreName')
								if(this.result2.length == this.orderList.length){
									this.checkedAll = true
									this.orderList.forEach(item => {
										this.$set(item,'checked',true)
									})
								}else{
									this.orderList.forEach(item => {
										this.result2.forEach(info => {
											if(info == item.customer_organization_salesroom_id){
												this.$set(item,'checked',true)
											}
										})
									})
								}
							}
						}
						console.log('地址列表11111',this.orderList)
					}
				}).catch( err => {
					console.log(err)
				})
			},
			// 加载下一页
			LoadingMore(){
				this.page ++
				console.log(this.page)
				if(this.page <= this.lastPage){
					let data = {
						token:this.$store.getters.getToken,
						page:this.page,
						pagesize:this.pageSize,
						name:this.shopName
					}
					this.$api.get_address_list(data).then( res => {
						console.log(res)
						if(res.status){
							this.orderList.push(res.list.data)
							// this.lastPage = res.list.last_page
							// var reg = /^(\d{3})\d{4}(\d{4})$/
							// for(let i = 0;i < this.orderList.length; i++){
							// 	this.orderList[i].phone = this.orderList[i].telephone.replace((reg, "$1****$2"))
							// }
							console.log('第多少页',this.page,this.orderList.length)
						}
					}).catch( err => {
						console.log(err)
					})
				}else{
					uni.showToast({
						title:'没有更多了',
						icon:'none',
						duration:2000
					})
				}
			}
		}
	}
</script>

<style>
	.no-shop{
		text-align: center;
		color: #999999;
		font-size: 32upx;
		position: fixed;
		top: 45%;left: 50%;
		transform: translate(-50%,-50%);
	}
	/* 删除地址成功标识css */
	.save-popup{
		width: 240upx;
		height: 240upx;
		border-radius: 12upx;
		background: rgba(58,58,58,0.9);
		position: fixed;
		top: 50%;left: 50%;
		transform: translate(-50%,-50%);
	}
	.save-popup-img{
		width: 72upx;
		height: 72upx;
		margin: 0 auto;
		margin-top: 58upx;
	}
	.save-popup-img>image{
		width: 100%;
		height: 100%;
	}
	.save-popup-title{
		text-align: center;
		color: #FFFFFF;
		font-size: 28upx;
		margin-top: 16upx;
	}
	/* 弹框样式 */
	.popup_box_de{
		height: 336upx;
		width: 640upx;
		background: #FFFFFF;
		border-radius: 24upx;
		padding-top: 40upx;
		box-sizing: border-box;
	}
	.popup_box-tip{
		text-align: center;
		color: #353535;
		font-size: 36upx;
		font-weight: 800;
	}
	.popup_box-reminder{
		width: 544upx;
		text-align: center;
		padding: 0 10upx;
		box-sizing: border-box;
		color: #666666;
		font-size: 30upx;
		margin: 0 auto;
		margin-top: 30upx;
	}
	.popup_box-click{
		width: 100%;
		height: 112upx;
		margin-top: 80upx;
		border-top: 1upx solid rgba(0, 0, 0, 0.1);
		display: flex;
	}
	.popup_box-click>view{
		width: 50%;
		line-height: 112upx;
		text-align: center;
		font-size: 34upx;
	}
	.popup_box-click>view:first-child{
		color: #000000;
		border-right: 1upx solid rgba(0, 0, 0, 0.1);
	}
	.popup_box-click>view:last-child{
		color: #FF8B46;
	}
	.add-shop-manage{
		width: 638upx;
		height: 88upx;
		line-height: 88upx;
		text-align: center;
		color: #FFFFFF;
		font-size: 32upx;
		border-radius: 44upx;
		margin: 0 auto;
		margin-top: 200upx;
		background: linear-gradient(to right,#FE9543,#FF664F);
		box-shadow: 0 8upx 16upx 0 rgba(166, 13, 0, 0.23);
	}
	.del-icon>image{
		width: 48upx;
		height: 48upx;
		margin-top: 58upx;
	}
	page{
		background: #F3F3F4;
	}
	.address-manage-page{
		width: 100%;
	}
	.search-bnak-detail{
		width: 100%;
		padding: 16upx 30upx;
		box-sizing: border-box;
		background: #FFFFFF;
		position: fixed;
		top: 0;left: 0;
		z-index: 999;
	}
	.search-bnak-detail>view{
		width: 100%;
		height: 72upx;
		border-radius: 36upx;
		background: #F3F3F4;
		display: flex;
		justify-content: space-between;
	}
	.search-bnak-input{
		display: flex;
		flex-grow: 1;
		padding-left: 30upx;
		box-sizing: border-box;
		padding-top: 16upx;
		justify-content: space-between;
	}
	.search-bnak-input>image{
		width: 32upx;
		height: 32upx;
		margin-top: 4upx;
	}
	.search-bnak-input>input{
		font-size: 28upx;
		flex-grow: 1;
		margin-left: 20upx;
	}
	.search-bnak-title{
		width: 116upx;
		height: 72upx;
		line-height: 72upx;
		text-align: center;
		background: #FF8B46;
		border-radius: 0 36upx 36upx 0;
		color: #FFFFFF;
		font-size: 28upx;
	}
	.address-details{
		width: 100%;
		height: 260upx;
		background: #FFFFFF;
		margin-top: 20upx;
		padding: 0 30upx;
		box-sizing: border-box;
		margin-bottom: 20upx;
	}
	.shop-name{
		width: 100%;
		padding: 30upx 0;
		box-sizing: border-box;
		border-bottom: 1upx solid #E6E6E6;
		display: flex;
		justify-content: space-between;
	}
	.shop-name-title{
		color: #333333;
		font-size: 30upx;
	}
	.shop-name-edit{
		display: flex;
		margin-top: 4upx;
	}
	.shop-name-edit>image{
		width: 28upx;
		height: 28upx;
		margin-top: 2upx;
		margin-right: 10upx;
	}
	.shop-name-edit>text{
		color: #666666;
		font-size: 24upx;
	}
	.address-details-content{
		width: 100%;
		display: flex;
		justify-content: space-between;
	}
	.address-msg{
		margin-top: 18upx;
	}
	.is-pick{
		width: 40upx;
		height: 40upx;
		margin-top: 38upx;
		border-radius: 50%;
	}
	.is-pick>image{
		width: 100%;
		height: 100%;
	}
	.user-msg{
		font-size: 28upx;
	}
	.user-msg>text:first-child{
		color: #333333;
	}
	.user-msg>text:last-child{
		color: #666666;
		display: inline-block;
		margin-left: 40upx;
	}
	.address-content{
		width: 560upx;
		color: #999999;
		font-size: 24upx;
		margin-top: 10upx;
	}
	.check-all{
		margin-top: 38upx;
		display: flex;
	}
	.check-all-title{
		color: #333333;
		font-size: 30upx;
		margin-top: 8upx;
	}
	.sure-add{
		margin-top: 56upx;
	}
	.sure-choose{
		width: 638upx;
		height: 88upx;
		line-height: 88upx;
		text-align: center;
		color: #FFFFFF;
		font-size: 32upx;
		background: linear-gradient(to right,#FE9543,#FF664F);
		border-radius: 44upx;
		box-shadow: 0 4upx 16upx 0 rgba(166, 13, 0, 0.23);
		margin: 0 auto;
	}
	.add-shop{
		width: 638upx;
		height: 88upx;
		line-height: 88upx;
		text-align: center;
		color: #FF8B46;
		font-size: 32upx;
		background: #FFFFFF;
		border-radius: 44upx;
		margin: 0 auto;
		margin-top: 20upx;
	}
</style>
